<template>
   <div @click.stop="clickTap(item, $event)"   
       v-for="item in data" 
       class="tree">
      <input v-model="item.checked" type="checkbox"/><span>{{ item.name }}</span>
      <xiaoman v-if="item?.children?.length" :data="item.children"></xiaoman>
   </div>
</template>

<script setup lang="ts">
   import { ref, reactive } from 'vue';
   interface Tree {
        name: string,
        checked: boolean,
        children?: Tree[]
    }
    defineProps<{
        data?: Tree[]
    }>()
    defineOptions({
        name: "xiaoman"
    })
    function clickTap(item:Tree, e:any) {
        console.log(item, e.target);
    }
</script>

<style scoped lang="scss">
.tree {
    margin-left: 10px;
}
</style>